<template>
  <div class="login-container">
    <page-header></page-header>
    <div class="login-card-container">
      <login-wrap
        title1="忘记密码"
      >
        <template #mainContent>
          <login-input
            :error-message="accountErrMsg"
            :placeholder="placeholder"
            v-model="account"
            @handleCheck="checkAccount"
            @cancelCheck="accountErrMsg = ''"
            @keyup.enter.native="handleReset"
          ></login-input>
          <login-input
            :error-message="passwordErrMsg"
            placeholder="请输入新的密码"
            input-type="2"
            :type="type"
            v-model="password"
            @handleCheck="checkPassword"
            @cancelCheck="passwordErrMsg = ''"
            @keyup.enter.native="handleReset"
            @handleShowPassword="handleShowPassword"
          ></login-input>
          <login-input
            :error-message="verifyErrMsg"
            :isCount="isCount"
            placeholder="请输入验证码"
            input-type="3"
            v-model="verifyCode"
            @sendSms="checkVerification"
            @cancelCheck="verifyErrMsg = ''"
            @keyup.enter.native="handleReset"
          ></login-input>
        </template>
        <template #mainFooter>
          <login-button @handle="handleReset" button="重置账号"></login-button>
        </template>
      </login-wrap>
    </div>
  </div>
</template>

<script>
import pageHeader from '../../components/pc/pageHeader';
import loginWrap from '../../components/pc/loginCard/loginWrap'
import LoginInput from "../../components/pc/loginCard/loginInput";
import LoginButton from "../../components/pc/loginCard/loginButton";
import config from '../../action/config';
import {checkPhone, checkPassword, checkVerification} from './checkfrom';


export default {
  name: "index",
  layout: 'blank',
  components: {
    LoginButton,
    LoginInput,
    loginWrap,
    pageHeader
  },
  data() {
    return {
      type: 'password',     // 显示密码
      account: '',          // 保存 手机号 邮箱
      password: '',         // 保存 密码
      verifyCode: '',       // 保存 验证码
      isPassword: true,     // 判断验证码
      placeholder: '请输入手机号',
      accountErrMsg: '',    // 手机号 邮箱 错误提示
      passwordErrMsg: '',   // 密码错误 提示信息
      verifyErrMsg: '',     // 验证码错误 提示信息
      isCount: false        // 是否开始倒计时
    }
  },
  watch: {
    account: function (val) {
      if (val.length > 10) {
        this.checkAccount();
      }
    },
    password: function (val) {
      if (val.length > 7) {
        this.checkPassword();
      }
    }
  },
  methods: {
    // 控制密码显示
    handleShowPassword() {
      this.type = this.type === 'password' ? 'text' : 'password';
    },
    // 检测account 手机
    checkAccount() {
      this.accountErrMsg = checkPhone(this.account);
    },
    // 检测 密码
    checkPassword() {
      this.passwordErrMsg = checkPassword(this.password);
    },
    // 检测验证码
    checkVerification() {
      this.isCount = false;
      this.accountErrMsg = checkPhone(this.account);
      if (this.accountErrMsg === '') {
        this.getSms();
        this.verifyErrMsg = '';
        this.isCount = true;
        setTimeout(() => {
          this.isCount = false;
        }, 60000);
      }
    },
    // 发送短信
    async getSms() {
      let smsResponse = await this.$axios.$get(config.api.get.Sms.send, {
        params: {
          mobile: this.account
        }
      });
      if (smsResponse.code === 0) {
        this.$message({
          type: 'success',
          message: '短信发送成功！'
        });
      } else {
        this.verifyErrMsg = smsResponse.msg;
        this.$message({
          type: 'info',
          message: smsResponse.msg
        });
      }
    },
    async handleReset() {
      this.checkAccount();
      this.checkPassword();
      this.verifyErrMsg = checkVerification(this.verifyCode);
      let resetResponse;

      if (this.passwordErrMsg === '' && this.accountErrMsg === '' && this.verifyErrMsg === '') {
        resetResponse = await this.$axios.$put(config.api.put.User.revisePassword, {
          mobile: this.account,
          password: this.password,
          verifyCode: this.verifyCode
        });
      }
      console.log(resetResponse);

      // 修改密码成功
      if (resetResponse !== undefined && resetResponse.code === 0) {
        this.$message({
          type: 'success',
          message: resetResponse.msg
        });
        this.$router.push('/users/login');
      } else if(resetResponse !== undefined) {
        // 修改密码失败
        if (resetResponse.code === 1002) {
          this.passwordErrMsg = resetResponse.msg;
        } else if (resetResponse.code === 1001) {
          this.accountErrMsg = resetResponse.msg;
        }else if (resetResponse.code === 1003) {
          this.verifyErrMsg = resetResponse.msg;
        } else {
          this.$message({
            type: 'error',
            message: resetResponse.msg
          });
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .login-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: $bgImage;

    .login-card-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>
